document.addEventListener("DOMContentLoaded", function () {
    const maskDiv = document.querySelector("div.mask");
    function showMask() {
        if (maskDiv) {
            maskDiv.style.display = "block";
        }
        document.body.style.overflow = "hidden";
    }
    function hideMask() {
        if (maskDiv) {
            maskDiv.style.display = "none";
        }
        document.body.style.overflow = "auto";
    }

    const menuIcon = document.querySelector("header > div.topmenu > img"),
        mbmenuList = document.querySelector("header > div.topmenu > nav");

    function createCloseButton() {
        const btnImgClose = document.createElement("a");
        btnImgClose.style.direction = 'rtl';
        btnImgClose.href = "javascript:void(0);";
        btnImgClose.innerHTML = `<img src="/wp-content/themes/girdtemp/imgs/close.svg" style="width:1.6rem;height:1.6rem;margin:2rem 2rem 0 0;">`;
        return btnImgClose;
    }

    if (menuIcon && mbmenuList) {
        menuIcon.addEventListener('click', () => {
            showMask();
            const btnImgClose = createCloseButton();
            mbmenuList.prepend(btnImgClose);
            btnImgClose.addEventListener("click", function () {
                mbmenuList.classList.remove("active");
                btnImgClose.remove();
                hideMask();
            });
            mbmenuList.classList.add("active");
        })

        if (maskDiv) {
            maskDiv.addEventListener("click", function () {
                mbmenuList.classList.remove("active");
                mbmenuList.querySelector("a>img").parentNode.remove();
                hideMask();
            });
        }
    }


    function onScrollEvent() {
        let lastScrollY = window.scrollY, diff = 0;
        const headerNode = document.querySelector("header");

        window.addEventListener("scroll", () => {
            if (window.scrollY < 50) {
                headerNode.classList.remove('fixed')
                return;
            }
            if (Math.abs(diff = window.scrollY - lastScrollY) > 50) {
                diff > 0 ? headerNode.classList.remove('fixed')
                    :headerNode.classList.add('fixed');
                lastScrollY = window.scrollY;
            }
        });
    }
    onScrollEvent();
});